<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>液体加载组件</title>
		<link rel="stylesheet" href="./46-液体加载组件.css">
	</head>
	<style>
		* {
		    margin: 0;
		    padding: 0;
		}
		
		body {
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    height: 100vh;
		    background-color: #222;
		}
		
		svg {
		    width: 0;
		    height: 0;
		}
		
		.loading {
		    position: relative;
		    width: 200px;
		    height: 200px;
		    filter: url(#gooey);
		}
		
		.loading span {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    display: block;
		    animation: animate 4s ease-in-out infinite;
		    animation-delay: calc(0.2s * var(--i));
		}
		
		.loading span::before {
		    content: "";
		    position: absolute;
		    top: 0;
		    left: calc(50% - 20px);
		    width: 40px;
		    height: 40px;
		    border-radius: 50%;
		    background: linear-gradient(#d1f5ff, #1683ff);
		    box-shadow: 0 0 30px #1683ff;
		}
		
		@keyframes animate {
		    0% {
		        transform: rotate(0deg);
		    }
		
		    50%,
		    100% {
		        transform: rotate(360deg);
		    }
		}
	</style>
	<body>
		<div class="loading">
			<span style="--i:1;"></span>
			<span style="--i:2;"></span>
			<span style="--i:3;"></span>
			<span style="--i:4;"></span>
			<span style="--i:5;"></span>
			<span style="--i:6;"></span>
			<span style="--i:7;"></span>
		</div>
		<svg>
			<filter id="gooey">
				<feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
				<feColorMatrix values="
          1 0 0 0 0
          0 1 0 0 0
          0 0 1 0 0
          0 0 0 20 -10
          "></feColorMatrix>
			</filter>
		</svg>
	</body>

</html>